<template>
  <div style="background-color: #fff; padding-top: 8px">
    <el-form :model="form" ref="form" label-width="120px">
      <el-form-item label="系统名称:">
        <el-tag type="success" size="medium">{{ SystemName }}</el-tag>
      </el-form-item>

      <el-form-item label="角色名称:">
        <span>{{ RoleName }}</span></el-form-item
      >
      <el-row style="min-height: 320px">
        <el-col :span="8">
          <el-form-item label="查看数据范围:">
            <div>
              <el-radio-group
                v-model="form.LookScope.ScopeType"
                style="
                  display: flex;
                  flex-flow: column nowrap;
                  align-items: flex-start;
                "
              >
                <el-radio
                  @click.native.prevent="inputRadio(item.Value)"
                  :label="item.Value"
                  v-for="(item, index) in checkList"
                  :key="index"
                  >{{ item.Name }}</el-radio
                >
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编辑数据范围:">
            <div>
              <el-radio-group
                v-model="form.EditScope.ScopeType"
                style="
                  display: flex;
                  flex-flow: column nowrap;
                  align-items: flex-start;
                "
              >
                <el-radio
                  @click.native.prevent="!item.disabled && inputRadio2(item.Value)"
                  :label="item.Value"
                  v-for="(item, index) in editList"
                  :key="index"
                  :disabled="item.disabled"
                  >{{ item.Name }}</el-radio
                >
              </el-radio-group>
            </div></el-form-item
          >
        </el-col>
        <el-col :span="8">
          <el-form-item label="删除数据范围:">
            <div>
              <el-radio-group
                v-model="form.DeleteScope.ScopeType"
                style="
                  display: flex;
                  flex-flow: column nowrap;
                  align-items: flex-start;
                "
              >
                <el-radio
                  @click.native.prevent="!item.disabled && inputRadio3(item.Value)"
                  :label="item.Value"
                  v-for="(item, index) in deleteList"
                  :key="index"
                  :disabled="item.disabled"
                  >{{ item.Name }}</el-radio
                >
              </el-radio-group>
            </div></el-form-item
          >
        </el-col>
      </el-row>
    </el-form>

    <div style="height: 56px">
      <div style="margin: 0 18px 18px 0; float: right">
        <el-button plain>返 回</el-button>
        <el-button type="primary" :loading="loading" @click="determine"
          >确 定</el-button
        >
      </div>
    </div>

    <div>
      <el-drawer
        title="选择组织"
        :visible.sync="drawer"
        direction="rtl"
        size="20%"
        :before-close="handleClose"
      >
        <div style="width: 90%; margin: 0 auto">
          <div style="margin-bottom: 12px">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
            </el-input>
          </div>
          <el-checkbox
            size="mini"
            :indeterminate="isIndeterminate"
            v-model="caseCheckAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >

          <el-tree
            ref="casetree"
            :filter-node-method="filterNode"
            :data="datas"
            show-checkbox
            node-key="id"
            default-expand-all
            :default-checked-keys="checkedKeys"
            :props="defaultProps"
            :check-strictly="true"
            @check-change="caseCheckChange"
          >
          </el-tree>
        </div>
        <span style="position: absolute; width: 100%; bottom: 12px">
          <el-button
            style="width: 45%; margin-left: 12px"
            @click="drawer = false"
            >取 消</el-button
          >
          <el-button style="width: 45%" type="primary" @click="submit"
            >确 定</el-button
          >
        </span>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  GetAuthorityScope_get,
  AuthorityScope_post,
} from "@/api/business";
import treeCom from "./treeCom";
export default {
  name: "VueXuAdminOperate",
  components: {
    treeCom,
  },
  watch: {
    filterText(val) {
      this.$refs.casetree.filter(val);
    },
  },
  data() {
    return {
      SystemName: JSON.parse(localStorage.getItem("xmGlDetails")).SystemName,
      RoleName: JSON.parse(localStorage.getItem("xmGlSzQx")).RoleName,
      caseCheckAll: false, //全选按钮的绑定值
      isIndeterminate: false, //全选按钮的全选，半选样式
      checkedKeys: [],
      datas: [],

      filterText: "",
      drawer: false,
      loading: false,
      checkList: [],
      editList: [],
      deleteList: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      type: "",
      form: {
        DeleteScope: {
          OrgIds: [],
          ScopeType: "",
        },
        EditScope: {
          OrgIds: [],
          ScopeType: "",
        },
        LookScope: {
          OrgIds: [],
          ScopeType: "",
        },
        RoleId: "",
      },
    };
  },

  mounted() {
    this.getCheckData();
  },

  methods: {
    async getCheckData() {
      let res = await GetAuthorityScope_get(
        JSON.parse(localStorage.getItem("xmGlSzQx")).Id
      );
      console.log(res, "GetAuthorityScope_get");

      this.checkList = res.data.response.ScopeList;
      this.editList = res.data.response.ScopeOtherList;
      this.deleteList = res.data.response.ScopeOtherList;
      this.form.DeleteScope = res.data.response.DeleteScope;
      this.form.DeleteScope = res.data.response.DeleteScope;
      this.form.EditScope = res.data.response.EditScope;
      this.form.LookScope = res.data.response.LookScope;
      this.form.RoleId = res.data.response.RoleId;
    },
    async inputRadio(value) {
    console.log(value)
      this.form.LookScope.ScopeType = value;
      let res = await AuthorityScope_post(this.form);
      console.log(res,"----------------")
      // this.checkList = res.data.response.ScopeList;
      this.editList = res.data.response.ScopeOtherList;
      this.deleteList = res.data.response.ScopeOtherList;
      this.form.DeleteScope = res.data.response.DeleteScope;

      this.form.EditScope = res.data.response.EditScope;
      this.form.LookScope = res.data.response.LookScope;
      this.form.RoleId = res.data.response.RoleId;
      if (value == 1) {
        this.type = "check";
        this.drawer = true;
        this.datas = res.data.response.LookScope.OrgTree;
        this.checkedKeys = res.data.response.LookScope.OrgIds;
        this.isIndeterminate = res.data.response.LookScope.isIndeterminate;
        this.caseCheckAll = res.data.response.LookScope.checkAll;
      }

      // this.datas=
    },
    async inputRadio2(value) {
      console.log(value);
      console.log(this.form, "this.form");
      let res = await AuthorityScope_post(this.form);
      this.form.EditScope.ScopeType = value;
      if (value == 1) {
        this.type = "edit";
        this.drawer = true;
        this.datas = res.data.response.EditScope.OrgTree;
        this.checkedKeys = res.data.response.EditScope.OrgIds;
        this.isIndeterminate = res.data.response.EditScope.isIndeterminate;
        this.caseCheckAll = res.data.response.EditScope.checkAll;
      }
    },
    async inputRadio3(value) {
      let res = await AuthorityScope_post(this.form);
      this.form.DeleteScope.ScopeType = value;
      if (value == 1) {
        this.type = "delete";
        this.drawer = true;
        this.datas = res.data.response.DeleteScope.OrgTree;
        this.checkedKeys = res.data.response.DeleteScope.OrgIds;
        this.isIndeterminate = res.data.response.DeleteScope.isIndeterminate;
        this.caseCheckAll = res.data.response.DeleteScope.checkAll;
      }
    },
    async submit() {
      console.log(this.type, "this.type");
      let list = this.$refs.casetree.getCheckedKeys();
      console.log(list, "list");
      if (this.type == "check") {
        this.form.LookScope.OrgIds = list;
      }
      if (this.type == "edit") {
        this.form.EditScope.OrgIds = list;
      }
      if (this.type == "delete") {
        this.form.DeleteScope.OrgIds = list;
      }
      console.log(this.form, "this.form");
      let res = await AuthorityScope_post(this.form);
      if (res.data.success) {
        this.drawer = false;
        this.checkList = res.data.response.ScopeList;
        this.editList = res.data.response.ScopeOtherList;
        this.deleteList = res.data.response.ScopeOtherList;
        this.form.DeleteScope = res.data.response.DeleteScope;
        this.form.DeleteScope = res.data.response.DeleteScope;
        this.form.EditScope = res.data.response.EditScope;
        this.form.LookScope = res.data.response.LookScope;
        this.form.RoleId = res.data.response.RoleId;
        this.$message({
          type: "success",
          message: res.data.msg,
        });
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    async determine() {
      this.loading = true;
      let res = await AuthorityScope_post(this.form);
      console.log(res, "AuthorityScope_post");
      if (res.data.success) {
        this.loading = false;
        this.getCheckData();
        this.$message({
          type: "success",
          message: res.data.msg,
        });
      } else {
        this.loading = false;
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    caseCheckChange() {
      //树节点check事件
      let checked_count = 0; //被勾选上的一级节点个数
      let disabled_count = 0; //置灰的一级节点个数
      let indeterminate_flag = false; //有没有一级节点处于半选状态
      // 深度遍历所有一级节点
      var numArray = [];

      let stack = [...this.datas],
        node;
      while ((node = stack.shift())) {
        numArray.push(node.id);

        if (this.$refs.casetree.getNode(node).disabled == true) {
          disabled_count += 1; //如果有置灰的节点，置灰变量加1
        }
        if (this.$refs.casetree.getNode(node).checked == true) {
          checked_count += 1; //如果有勾选的节点，勾选变量加1
        }
        if (this.$refs.casetree.getNode(node).indeterminate == true) {
          indeterminate_flag = true; //如果有半选的节点，半选变量设为true
        }
        // 如果有子元素的话进行压栈操作
        if (node.children) stack.unshift(...node.children);
      }
      if (checked_count == 0) {
        this.isIndeterminate = false;
        this.caseCheckAll = false; //如果勾选的一级节点数为0，则设置全选按钮样式不为半选样式，全选的值为false
        if (indeterminate_flag == true) {
          //如果下面有半选的，设置全选按钮的样式为半选样式
          this.isIndeterminate = true;
          this.caseCheckAll = false;
        }
      } else if (checked_count + disabled_count == numArray.length) {
        //如果树上勾上的和置灰的加起来等于tree上data的长度，设置全选按钮样式不为半选样式，全选值为true
        this.isIndeterminate = false;
        this.caseCheckAll = true;
      } else {
        //上面条件不满足，则说明没有全部勾上，设置样式为半选，全选值为false
        this.isIndeterminate = true;
        this.caseCheckAll = false;
      }
      return;
    },
    handleCheckAllChange() {
      //全选按钮勾上的方法事件
      this.isIndeterminate = false; //设置全选按钮样式不为半选
      if (this.caseCheckAll == true) {
        //如果是当前值是全选，依次遍历节点设置勾选，同时过滤的disabled为true的
        // 深度遍历
        let stack = [...this.datas],
          node;
        while ((node = stack.shift())) {
          if (this.$refs.casetree.getNode(node).disabled == false) {
            this.$refs.casetree.setChecked(node.id, true, true);
          }
          // 如果有子元素的话进行压栈操作
          if (node.children) stack.unshift(...node.children);
        }
      } else {
        //当前值不是全选，设置勾选列表为空
        this.$refs.casetree.setCheckedKeys([]);
      }
    },
    handleClose(done) {
      this.drawer = false;
    },
  },
};
</script>

<style  scoped>
.el-radio {
  margin-top: 12px;
}
.el-radio__label {
  font-size: 15px;
}
/deep/
  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none !important;
}
</style>
